import React, { useEffect, useState } from 'react'
import { Input } from 'antd-mobile'
import { AddressBookFill, BellOutline } from 'antd-mobile-icons'
import '../home/home.css'
import { NavBar, Toast } from 'antd-mobile'
import c1 from '../../img/c1.png'
import c2 from '../../img/c2.png'
import ys from '../../img/ys.png'
import { Swiper, Image } from 'react-vant';
import { Card, Grid } from 'react-vant';
import { ShopO } from '@react-vant/icons'
import instance from '../../axios/instance'
import Wen from '../../components/wen/Index'
import Lun from '../../components/lun/Index'
import { Tabs } from 'react-vant'
import Biao from '../../components/biao/Index'
import { useNavigate } from 'react-router-dom'


function Index() {
  const [value, setValue] = useState('')

  const [badata, setBaData] = useState([])
  const [zxData, setZxData] = useState([])
  const navigate=useNavigate()


  const ke = () => {
    instance.get('/health/share/knowledgeBase/v1/findDepartment').then(res => {
      console.log('res', res)
      if (res.status === 200) {
        setBaData(res.data.result)
      }
    })
  }
  useEffect(() => {
    ke()
  }, [])

  // 健康资讯
  useEffect(() => {
    instance.get('/health/share/information/v1/findInformationPlateList').then(res => {
      console.log('reszz', res)
      if (res.status === 200) {
        setZxData(res.data.result)
      }
    })
  }, [])

  //资讯列表
  const [page, setPage] = useState(1)
  const [count, setCount] = useState(1)
  const [zxlist, setZxList] = useState([])
  const [antPlatId, setAntPlatId] = useState(1)

  useEffect(() => {
    instance.get('/health/share/information/v1/findInformationList', {
      params: {
        plateId: antPlatId,
        page: page,
        count: count
      }
    }).then(res => {
      console.log('resiii', res)
      if (res.status === 200) {
        setZxList(res.data.result)
      }
    })
  }, [page, count, antPlatId])

  //点击切换
  const handelTab = (active) => {
    const seleTab = zxData[active]
    if (seleTab) {
      setAntPlatId(seleTab.id)
      setPage(1)
    }
  }

  //跳转到搜索页
  const exchangeSearch=()=>{
    navigate('/search')
  }


  return (
    <div className='box'>
      <div className='hhh'>
        <NavBar backIcon={false}
          className='tab'
          left={<AddressBookFill style={{ fontSize: '30px', marginLeft: "-10px" }} />}
          right={<BellOutline style={{ fontSize: '30px' }} />}>
          <Input
            placeholder='请输入内容'
            value={value}
            onChange={val => {
              setValue(val)
            }}
            className='ss'
            onClick={exchangeSearch}
          />
        </NavBar>
        {/* 轮播图 */}
        <Lun></Lun>
        <Card style={{ marginTop: '5px', marginBottom: '5px', border: '1px solid #ccc' }}>
          <Card.Header>知识宝典</Card.Header>
        </Card>
        <div className='zs'>
          <div style={{ border: '1px solid #ccc', height: '200px' }}
          onClick={()=>navigate('/data')}>
            <p>常见病症</p>
            <img src={c1} alt="" style={{ width: '185px' }} />
          </div>
          <div style={{ border: '1px solid #ccc', height: '200px' }}
          onClick={()=>navigate('/data')}>
            <p>常用药品</p>
            <img src={c2} alt="" style={{ width: '185px' }} />
          </div>
        </div>
        <Card style={{ marginTop: '5px', marginBottom: '5px', border: '1px solid #ccc' }}>
          <Card.Header>问诊咨询</Card.Header>
        </Card>
        <Grid columnNum={4}>
          {
            badata.map((item, index) => (
              <Grid.Item key={index} icon={item.pic ? <Image src={item.pic} lazyload /> : <ShopO />} text={item.departmentName} />
            ))
          }
        </Grid>
        {/* 健康评测 */}
        <Wen></Wen>
        <Card style={{ marginTop: '5px', marginBottom: '5px', border: '1px solid #ccc' }}>
          <Card.Header>健康资讯</Card.Header>
        </Card>
        <div className='yy'>
          <img src={ys} alt="" />
          <div>
            <p>女性朋友们都注意啦！营养专家：如果不想失眠，请远离6种吃法！</p>
            <p className='yyy'>
              <span>范志红注册营养师</span>
              <span>10分钟前</span>
            </p>
          </div>
        </div>
        <Biao antPlatId={antPlatId} zxlist={zxlist} zxData={zxData} handelTab={handelTab}></Biao>
      </div>
    </div>
  )
}

export default Index
